<template>
  <view class="">
    <nav-bar :query.sync="query" @reset="listInit" />
    <view class="flex flex-wrap bg-white p-8">
      <view v-for="item in list" :key="item.id" class="item" @click="goDetail(item.id)">
        <image class="item-img" :src="item.logo" mode="" />
        <view class="item-title ellipsis-2">{{ item.name }}</view>
        <view class="text-error"><text class="text-12">￥</text><text class="text-16">{{ item.price }}</text></view>
      </view>
    </view>
    <uni-load-more :status="$f.getLoading(loading)" />
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      list: [],
      page: 1,
      loading: 0,
      limit: 10,
      query: {}
    }
  },
  watch: {
    query: {
      handler(val) {
        this.listInit()
      },
      deep: true
    }
  },
  onShareAppMessage() {
    return this.$f.wxShare()
  },
  onShareTimeline() {
    return this.$f.wxShare()
  },
  onReachBottom() {
	  this.getList()
  },
  onLoad(options = {}) {
    this.query = {
      id: options.id ? Number(options.id) : 0, // 分类id
      sort: options.sort ? options.sort.trim() : '',
      format: options.format ? options.format.trim() : '',
      keyword: options.keyword ? options.keyword.trim() : ''
    }
  },
  methods: {
    goDetail(id) {
      this.$Router.push('/pages/detail/goods?id=' + id)
    },
    listInit() {
      this.list = []
      this.page = 1
      this.loading = 0
      this.getList()
    },
    getList() {
      if (this.loading) return
      this.loading = 1
      this.$f.post('api/comboList', {
        ...this.query,
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.loading = this.limit > res.data.length ? 2 : 0
        if (res.data.length) {
          this.list = [...this.list, ...res.data]
          this.page += 1
        }
      })
    }
  }
}
</script>

<style lang="scss">
.item {
	width: 50%;
	padding: 10rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
}
.item-img {
	display: block;
	width: 100%;
	height: 190rpx;
	border-radius: 8rpx;
}
.item-title {
	margin: 12rpx 0;
	font-size: 26rpx;
	line-height: 38rpx;
}
</style>
